<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.section:nth-child(1){
			background-color: orange;
		}
		.section:nth-child(2){
			background-color: skyblue;
		}
		.section:nth-child(3){
			background-color: yellowgreen;
		}
		.section:nth-child(4){
			background-color: drakpink;
		}
		body{
			margin: 0;
		}
		h3{
			margin: 0;
		}
	</style>

	<!-- fullpage是基于jq的插件 所以我们需要先导入jq -->
	<script type="text/javascript" src='js/jquery-3.0.0.min.js'></script>
	<!--  github 文档一般是英文  -->
	<script type="text/javascript" src='js/jquery.fullPage.min.js'></script>

	<!-- 调用 插件的提供的方法 -->
	<!-- 
		注意:布局的子页面 class必须拥有 section 

	 -->
	<script type="text/javascript">
		$(function(){
			// 插件提供的方法
		    $('#dowebok').fullpage({
		    	paddingTop:150,
		    	afterLoad:function(anchorLink ,index){
		    		console.log(anchorLink+'|||'+index);
		    		//  当前页变色 eq方法 需要的索引是 0开始
		    		$('.section').eq(index-1).css('backgroundColor','green');
		    	}
		    });
		});
	</script>
</head>
<body>
	<div id="dowebok">
	    <div class="section orange">
	        <h3>第一屏</h3>
	    </div>
	    <div class="section">
	        <h3>第二屏</h3>
	    </div>
	    <div class="section">
	        <h3>第三屏</h3>
	    </div>
	    <div class="section">
	        <h3>第四屏</h3>
	    </div>
	</div>
</body>
</html>